<template>

  <div class="emp-container">


    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>员工信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>普通员工信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="query-box">

      <el-col :span="24">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="员工姓名">
                <el-input v-model="query.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工编号">
                <el-input v-model="query.empNO"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部门">
                <el-select v-model="query.dept.id">
                  <el-option v-for="dept in state.depts" :label="dept.val" :value="dept.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="职务">
                <el-select v-model="query.job.id">
                  <el-option v-for="job in state.jobs" :label="job.val" :value="job.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学历">
                <el-select v-model="query.edu.id">
                  <el-option v-for="xueli in state.xuelis" :label="xueli.val" :value="xueli.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="success" @click="btnQueryClick">搜索</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>


      </el-col>


    </el-row>


    <el-row>

      <el-button-group>

        <el-button type="success" @click="btnEnterClick">入职</el-button>
        <el-button type="waring">转职</el-button>
        <el-button type="danger">离职</el-button>
        <el-button type="info">导出</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="info">打印</el-button>
      </el-button-group>

      <el-table :data="state.tableData">

        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="员工姓名" width="100"></el-table-column>
        <el-table-column prop="empNO" label="编号" width="100"></el-table-column>
        <el-table-column prop="edu.val" label="学历" width="100"></el-table-column>
        <el-table-column prop="dept.val" label="部门" width="100"></el-table-column>
        <el-table-column prop="job.val" label="职务"></el-table-column>
        <el-table-column prop="state.val" label="在职状态"></el-table-column>
        <el-table-column label="操作">

          <template #default="scope">

            <el-button type="success" @click="btnEditClick(scope.row)">编辑</el-button>
            <el-button type="primary" @click="btnChangeClick(scope.row)">转职</el-button>
            <el-button type="danger" @click="btnQuitClick(scope.row)">离职</el-button>

          </template>

        </el-table-column>


      </el-table>

    </el-row>


    <el-dialog
        v-model="state.change.dialogVisible"
        :title="state.change.title"
        width="30%"
    >


     <el-form label-width="120px">
         <el-form-item label="员工姓名">
               <el-input v-model="change.name"></el-input>
         </el-form-item>
       <el-form-item label="员工编号">
         <el-input v-model="change.empNO"></el-input>
       </el-form-item>
       <el-form-item label="原部门">
         <el-select v-model="change.sourceDept.id">
           <el-option v-for="dept in state.depts" :label="dept.val" :value="dept.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="原职务">
         <el-select></el-select>
       </el-form-item>
       <el-form-item label="转入部门">
         <el-select></el-select>
       </el-form-item>
       <el-form-item label="转入职务">
         <el-select></el-select>
       </el-form-item>
     </el-form>
      <template #footer>
      <span class="dialog-footer">
<!--        国际化-->
        <el-button @click="state.change.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnChangeSubmitClick">
          确认
        </el-button>
      </span>
      </template>

    </el-dialog>



    <el-dialog
        v-model="state.dialogVisible"
        :title="state.info.title"
        width="30%"
    >

      <el-form label-width="120px">


        <el-form-item label="员工姓名">
          <el-input v-model="info.name"></el-input>
        </el-form-item>


        <el-form-item label="员工编号">
          <el-input v-model="info.empNO"></el-input>
        </el-form-item>


        <el-form-item label="部门">
          <el-select v-model="info.dept.id">
            <el-option v-for="dept in state.depts" :label="dept.val" :value="dept.id"></el-option>
          </el-select>

        </el-form-item>


        <el-form-item label="职务">
          <el-select v-model="info.job.id">
            <el-option v-for="job in state.jobs" :label="job.val" :value="job.id"></el-option>


          </el-select>

        </el-form-item>


        <el-form-item label="学历">
          <el-select v-model="info.edu.id">
            <el-option v-for="xueli in state.xuelis" :label="xueli.val" :value="xueli.id"></el-option>


          </el-select>

        </el-form-item>

      </el-form>


      <template #footer>
      <span class="dialog-footer">
<!--        国际化-->
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnSubmitClick">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>


  </div>

</template>

<script setup>

import {reactive} from "vue";
import axios from 'axios'

import dict from '@/mock'

const state = reactive({
  tableData: [],
  xuelis: [],
  selectedXueli: -1,
  selectedDept: -1,
  selectedJob: -1,
  depts: [],
  jobs: [],
  dialogVisible: false,
  info: {
    title: '员工信息编辑'
  },
  change:{
      title:'员工转职',
      dialogVisible:false
  }
})


/**
 * 数据实体
 * */
const query = reactive({
  name: '',
  empNO: '',
  edu: {
    id: -1
  },
  dept: {
    id: -1
  },
  job: {
    id: -1
  }
})


/**
 *  重构
 *    1. 代价
 *
 * */
const info = reactive({
  id: -1, // 唯一标识
  name: '',
  empNO: '',
  edu: {
    id: -1
  },  // 通过select选中的id 去对应数组中 筛选对应项目
  dept: {
    id: -1
  },
  job: {
    id: -1
  },

})

const change = reactive({
    id:-1,
    name:'',
    empNO:'',
    sourceDept:{
       id:-1
    },
   sourceJob:{
       id:-1
   },
   targetDept:{
        id:-1
   },
   targetJob:{
       id:-1
   }
})

state.depts = dict.depts;
state.depts.unshift({
  id: -1,
  val: "----全部部门------"
})
state.jobs = dict.jobs;
state.jobs.unshift({
  id: -1,
  val: "----全部职务------"
})
state.xuelis = dict.xueli;
state.xuelis.unshift({
  id: -1,
  val: "----全部学历------"
})

axios({
  url: 'http://test//info/nor',
  dataType: 'json',
  method: 'get'
}).then((res) => {
  state.tableData = res.data.filter((item) => {
    return item.state.id != 2;
  });
})


function btnEnterClick() {

  state.info.title = "员工入职";

  info.id = -1;
  info.name = '';
  info.edu = {
    id: -1
  }

  state.dialogVisible = true;
}


function btnSubmitClick() {

  info.edu = state.xuelis.find((item) => {
    return item.id == info.edu.id;
  })

  if (info.id > 0) {

    state.tableData[info.id - 1].name = info.name;

    state.tableData[info.id - 1].edu = info.edu;

  } else {
    state.tableData.unshift(info)
  }

  state.dialogVisible = false;

}

function btnChangeSubmitClick(){

    // 1. 找到数组源/数组中 和 修改人员 对应的信息
    // 2. 更改对应的部门和职务
    // 3. 更新table的数据显示

}


function btnEditClick(row) { // row是一个形式参数

  /**
   * 数据驱动
   * */

  state.info.title = "员工信息-编辑"

  state.dialogVisible = true;
  info.id = row.id;
  info.name = row.name;
  info.edu = row.edu;

  console.log(row)

}


/**
 *  离职操作
 * */
function btnQuitClick(row) {

  if (confirm('是否进行当前员工的离职操作？')) {
    row.state = dict.states.find((item) => {
      return item.id == 2;
    })
  }


  state.tableData = state.tableData.filter((item) => {
    return item.state.id != 2;
  })

}

function btnChangeClick(row){


  change.id = row.id;

  change.name = row.name;
  change.empNO = row.empNO;
  change.sourceDept = row.dept;

   state.change.dialogVisible = true;
}



function btnQueryClick() {

//   获取 搜素区（query）的表单信息

  if(query.name!=''){

    state.tableData=   state.tableData.filter((item)=>{
            return item.name ==query.name;
       })
  }

  if(query.empNO!=''){
    state.tableData=   state.tableData.filter((item)=>{
      return item.empNO ==query.empNO;
    })
  }

  if(query.dept.id!=-1){
    state.tableData=   state.tableData.filter((item)=>{
      return item.dept.id ==query.dept.id;
    })
  }


}


</script>

<style scoped>

.emp-container {
  padding: 10px;
}

.query-box {
  margin-top: 15px;
}

.el-select {
  width: 100%;
}

</style>